<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输权限名称" clearable v-model="name" @clear="searchPermission">
                        <el-button slot="append" icon="el-icon-search" @click="searchPermission"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="openAddPermissionDialog">添加权限</el-button>
                </el-col>
            </el-row>
            <el-table :data="permissionList" border stripe>
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="权限名称" prop="name"></el-table-column>
                <el-table-column label="权限路径" prop="url"></el-table-column>
                <el-table-column label="权限类型">
                    <template slot-scope="sc">{{sc.row.urlType==1?'菜单权限':'接口权限'}}</template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removePermissionById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[3, 6 , 12, 24]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>

        <!--添加权限-->
      <!--添加菜单-->
      <el-dialog title="添加权限" :visible.sync="addPermissionFormVisible" @close="closeAddPermissionForm" :close-on-click-modal="false">
        <el-form ref="addPermissionForm" :rules="addPermissionRules" :model="addPermission" label-width="150px" size="mini">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="addPermission.name"></el-input>
          </el-form-item>
          <el-form-item label="权限URL">
            <el-input v-model="addPermission.url"></el-input>
          </el-form-item>
          <el-form-item label="权限类型" prop="urlType">
            <el-select v-model="addPermission.urlType" placeholder="请选择权限类型">
              <el-option label="菜单权限" :value="1"></el-option>
              <el-option label="接口权限" :value="-1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="父菜单" prop="parentId">
            <el-select v-model="addPermission.parentId"  placeholder="请选择父菜单">
              <el-option label="一级菜单" :value="-1"></el-option>
              <el-option v-for="p in parentList" :label="p.name" :value="p.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button  @click="cancelPermissionForm">取 消</el-button>
          <el-button type="primary" @click="addPermissionForm">确 定</el-button>
        </div>
      </el-dialog>
      <!--修改菜单-->
      <el-dialog title="修改权限" :visible.sync="editPermissionFormVisible" :close-on-click-modal="false">
        <el-form ref="editPermissionForm" :rules="editPermissionRules" :model="editPermission" label-width="150px" size="mini">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="editPermission.name"></el-input>
          </el-form-item>
          <el-form-item label="权限URL">
            <el-input v-model="editPermission.url"></el-input>
          </el-form-item>
          <el-form-item label="权限类型" prop="urlType">
            <el-select v-model="editPermission.urlType" placeholder="请选择权限类型">
              <el-option label="菜单权限" value="1"></el-option>
              <el-option label="接口权限" value="-1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="父菜单" prop="parentId">
            <el-select v-model="editPermission.parentId"  placeholder="请选择父菜单">
              <el-option label="一级菜单" :value="-1"></el-option>
              <el-option v-for="p in parentList" :label="p.name" :value="p.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="editPermissionFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="modifyPernmission">确 定</el-button>
        </div>
      </el-dialog>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 3,
                permissionList: [],
                total: 0,
                name: "", //权限名称
                urlTypeDesc: "菜单权限",
                parentList:[],
                addPermissionFormVisible:false,
                addPermission:{
                  name:'',
                  url:'',
                  urlType:1,
                  parentId:-1
                },
                addPermissionRules:{
                  name:[
                    {required:true,message:"名称不能为空",trigger:"blur"}
                  ],
                  urlType:[
                    {required:true,message:"请选择菜单类型",trigger:"change"}
                  ],
                  parentId:[
                    {required:true,message:"请选择父菜单",trigger:"change"}
                  ]
                },
                editPermissionFormVisible:false ,
                editPermission:{
                  id:0,
                  name:'',
                  url:'',
                  urlType:1,
                  parentId:-1,
                  insertTime:''
                },
                editPermissionRules:{
                  name:[
                    {required:true,message:"名称不能为空",trigger:"blur"}
                  ],
                  urlType:[
                    {required:true,message:"请选择菜单类型",trigger:"change"}
                  ],
                  parentId:[
                    {required:true,message:"请选择父菜单",trigger:"change"}
                  ]
                }
            };
        },
        methods: {
          removePermissionById(id) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$axios.delete("/permission/del/" + id)
                  .then((data) => {
                    if (data.data.code == 200) {
                      this.$message({
                        type: 'success',
                        message: '删除成功!',
                        duration: 1000
                      });
                      this.searchPermission();
                    } else {
                      this.$message({
                        type: 'error',
                        message: data.data.msg,
                        duration: 1000
                      });
                    }
                  });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
            //修改权限数据
            modifyPernmission(){
              this.$refs.editPermissionForm.validate((v)=>{
                if (!v) return ;
                let url = "/permission/modify";
                this.$axios.put(url,this.editPermission)
                    .then((res)=>{
                      if (res.data.code == 200) {
                        this.$message({
                          message: res.data.msg,
                          type: 'success',
                          duration:1000
                        });
                        this.editPermissionFormVisible = false ;
                        this.reloadData();
                        this.initParentPermssion();
                      }else {
                        this.$message({
                          message: res.data.msg,
                          type: 'error',
                          duration:1000
                        });
                      }
                    })
              });
            },
          //打开修改对话框
            showEditDialog(obj){
              this.editPermission = obj ;
              this.editPermissionFormVisible = true ;
            },
            //打开添加对话框
            openAddPermissionDialog(){
                this.addPermissionFormVisible = true ;
            },
          //关闭添加对话框
            closeAddPermissionForm(){
                this.$refs.addPermissionForm.resetFields();
                this.addPermissionFormVisible = false ;
            },
          //关闭对话框
            cancelPermissionForm(){
              this.$refs.addPermissionForm.resetFields();
              this.addPermissionFormVisible = false ;
            },
          //添加权限
            addPermissionForm(){
              this.$refs.addPermissionForm.validate((v)=>{
                if (!v) return ;
                let url = "/permission/add";
                this.$axios.post(url,this.addPermission)
                    .then((res)=>{
                      if (res.data.code == 200) {
                        this.$message({
                          message: res.data.msg,
                          type: 'success',
                          duration:1000
                        });
                        this.$refs.addPermissionForm.resetFields();
                        this.addPermissionFormVisible = false ;
                        this.initParentPermssion();
                      }else {
                        this.$message({
                          message: res.data.msg,
                          type: 'error',
                          duration:1000
                        });
                      }
                    })
              });
            },
            handleSizeChange(size){
              this.pageNum =1 ;
              this.pageSize = size;
              this.reloadData();
            },
            handleCurrentChange(now){
              this.pageNum =now;
              this.reloadData();
            },
            searchPermission(){
              this.pageNum = 1;
              this.reloadData();
            },
            reloadData(){
               let url = "/permission/list";
               this.$axios.get(url,{
                 params:{
                   name:this.name,
                   now:this.pageNum,
                   size:this.pageSize
                 }
               }).then((res)=>{
                 if (res.data.code == 200){
                   this.permissionList = res.data.data.list;
                   this.pageNum = res.data.data.pageNum;
                   this.pageSize = res.data.data.pageSize ;
                   this.total = res.data.data.total;
                 }else {
                   this.$message({
                     message: res.data.msg,
                     type: 'error',
                     duration:1000
                   });
                 }
               })
            },
            initParentPermssion(){
              let url = "/permission/getAllParent";
              this.$axios.get(url).then((res)=>{
                if (res.data.code == 200){
                  this.parentList = res.data.data;
                }else {
                  this.$message({
                    message: res.data.msg,
                    type: 'error',
                    duration:1000
                  });
                }
              })
            }
        },
        created() {
            this.reloadData();
            this.initParentPermssion();
        }
    };
</script>
<style lang="less" scoped>
</style>